import {
  defineComponent,
  onMounted,
  reactive,
  ref,
} from "vue";
import { EE } from "../event";
import { useTaskApi } from "../api/task";

const TaskNavPanel = defineComponent({
  name: "TaskNavPanel",
  setup() {
    const taskNavParams = reactive({
      sleep: 10,
      name: "",
      save: true,
      run: true,
      loop: false,
    });
    const stationList = ref<TTaskStation[]>([]);
    const registerTaskNavEvent = () => {
      EE.on("addTaskNavStation", (station) => {
        stationList.value.push({
          station: station,
          sleep: taskNavParams.sleep,
        });
      });
    };
    const delStation = (idx: number) => {
      stationList.value.splice(idx, 1);
    };

    const confirmTaskNav = async () => {
      const taskNavList = stationList.value.map((item) => {
        let sleep = 10;
        if (typeof item.sleep === "string") {
          sleep = parseInt(item.sleep);
        }
        return {
          station: item.station,
          sleep: sleep,
        };
      });

      // 关闭任务导航panel
      EE.emit("toggleTaskNavPanel");
      // run task nav
      await useTaskApi().setTask({
        name: taskNavParams.name,
        task_list: taskNavList,
        is_save: taskNavParams.save,
        is_run: taskNavParams.run,
        is_loop: taskNavParams.loop,
      });
    };

    onMounted(() => {
      registerTaskNavEvent();
    });
    return () => (
      <>
        <div
          class="w-full h-72 z-30 absolute bottom-0 bg-slate-300 opacity-90 text-2xl  overflow-x-auto "
          style={{ transition: "opacity 2s ease-in-out" }}
        >
          <div>
            <label class="text-sm" for="sleep">
              停留时间 :{" "}
            </label>
            <input
              class="bg-blue-400 rounded-md text-sm text-white  w-12 text-center"
              v-model={taskNavParams.sleep}
              id="sleep"
            ></input>
            <span class="text-sm mr-5"> s</span>

            <label class="text-sm" for="taskName">
              线路名称 :{" "}
            </label>
            <input
              class="bg-blue-400 rounded-md text-sm text-white  w-32 mr-5  text-center"
              id="taskName"
              v-model={taskNavParams.name}
            />

            <label class="text-sm" for="run">
              立即执行 :{" "}
            </label>
            <input
              class="mr-5"
              type="checkbox"
              id="run"
              v-model={taskNavParams.run}
            />

            <label class="text-sm" for="save">
              是否保存 :{" "}
            </label>
            <input
              class="mr-5"
              type="checkbox"
              id="save"
              v-model={taskNavParams.save}
            />

            <label class="text-sm" for="loop">
              循环执行 :{" "}
            </label>
            <input
              class="mr-5"
              type="checkbox"
              id="loop"
              v-model={taskNavParams.loop}
            />

            <button
              class="bg-blue-400 rounded-md text-sm text-white ml-2 p-1 text-center"
              onClick={() => confirmTaskNav()}
            >
              确定
            </button>
          </div>
          {stationList.value.map((item, idx) => {
            return (
              <>
                <button
                  class="bg-blue-400 rounded-md text-sm text-white ml-2 p-1 text-center"
                  onClick={() => delStation(idx)}
                >
                  {item.station}
                </button>
                <input
                  class="bg-blue-400 rounded-md  text-sm text-white ml-2 w-12 p-1 text-center"
                  v-model={item.sleep}
                ></input>
                <span class=" rounded-md text-sm  ml-1 text-center">s</span>
                <span class=" text-sm p-1 text-center">→</span>
              </>
            );
          })}
          <hr class="border-blue-400 my-2" />
        </div>
      </>
    );
  },
});

export default TaskNavPanel;
